Drawer Navigation এবং Nested Navigation Stacks

React Native অ্যাপে Drawer Navigation এবং Nested Navigation Stacks ব্যবহৃত হয় অ্যাপ্লিকেশনের বিভিন্ন স্ক্রীন বা পৃষ্ঠাগুলোর মধ্যে নেভিগেশন ব্যবস্থা পরিচালনা করতে। React Navigation হল সবচেয়ে জনপ্রিয় লাইব্রেরি, যা ড্রয়ার নেভিগেশন এবং স্ট্যাক নেভিগেশনসহ বিভিন্ন নেভিগেশন স্ট্রাকচার সহজেই পরিচালনা করতে সহায়ক।

এখানে আমরা Drawer Navigation এবং Nested Navigation Stacks এর মাধ্যমে React Native অ্যাপে স্ক্রীন পরিবর্তন এবং নেভিগেশন কনফিগার করতে শিখব।

১. Drawer Navigation

Drawer Navigation হলো একটি সাইড মেনু, যা সাধারণত অ্যাপের প্রধান স্ক্রীনের থেকে স্লাইডিং প্যানেল বা মেনু হিসেবে আসে। এটি ব্যবহারকারীদের অ্যাপের বিভিন্ন স্ক্রীন বা বিভাগে দ্রুত নেভিগেট করতে দেয়। React Native-এ Drawer Navigation কনফিগার করতে react-navigation/drawer প্যাকেজ ব্যবহার করা হয়।

Drawer Navigation ইনস্টলেশন

npm install @react-navigation/native @react-navigation/drawer react-native-screens react-native-safe-area-context
npm install react-native-gesture-handler react-native-reanimated

Drawer Navigation উদাহরণ

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} />
    </View>
  );
}

function ProfileScreen() {
  return (
    <View>
      <Text>Profile Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

এখানে কী হচ্ছে:

• createDrawerNavigator() ব্যবহার করে ড্রয়ার নেভিগেশন তৈরি করা হয়েছে।
• Drawer.Navigator এবং Drawer.Screen কম্পোনেন্ট ব্যবহার করে Home এবং Profile স্ক্রীনগুলো ড্রয়ার মেনুতে যোগ করা হয়েছে।
• ড্রয়ার মেনু ব্যবহার করে ব্যবহারকারী Home এবং Profile স্ক্রীনে নেভিগেট করতে পারবেন।

২. Nested Navigation Stacks

Nested Navigation Stacks সাধারণত ব্যবহার করা হয় যখন আপনি একটি স্ক্রীনের ভিতরে আরও একটি নেভিগেশন স্ট্যাক চান। এটি একটি স্ক্রীনে একাধিক স্তরের নেভিগেশন পরিচালনা করতে সাহায্য করে, যেমন একটি ফিচার স্ক্রীনে যেতে যাওয়ার জন্য stack navigation বা ডিটেইল স্ক্রীন।

Nested Stack Navigation উদাহরণ

npm install @react-navigation/stack

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

// প্রথম স্ট্যাক স্ক্রীন
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

// দ্বিতীয় স্ট্যাক স্ক্রীন
function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button title="Go to Sub Detail" onPress={() => navigation.navigate('SubDetail')} />
    </View>
  );
}

// তৃতীয় স্ট্যাক স্ক্রীন (Nested)
function SubDetailScreen() {
  return (
    <View>
      <Text>Sub Detail Screen</Text>
    </View>
  );
}

// Stack Navigator তৈরি
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="SubDetail" component={SubDetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

এখানে কী হচ্ছে:

• createStackNavigator() ব্যবহার করে স্ট্যাক নেভিগেশন তৈরি করা হয়েছে।
• HomeScreen থেকে DetailsScreen এবং তারপর SubDetailScreen এ নেভিগেট করার জন্য একাধিক স্তরের নেভিগেশন তৈরি করা হয়েছে।

৩. Drawer Navigation এবং Nested Stack একসাথে ব্যবহার

আপনি একসাথে Drawer Navigation এবং Nested Stack Navigation ব্যবহার করতে পারেন, যাতে একটি ড্রয়ার মেনুতে একাধিক স্তরের স্ট্যাক নেভিগেশন পরিচালনা করতে পারবেন।

Drawer + Nested Stack Navigation উদাহরণ

import * as React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { View, Text, Button } from 'react-native';

// স্ট্যাক নেভিগেশন স্ক্রীন
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button title="Go to Sub Detail" onPress={() => navigation.navigate('SubDetail')} />
    </View>
  );
}

function SubDetailScreen() {
  return (
    <View>
      <Text>Sub Detail Screen</Text>
    </View>
  );
}

// Stack Navigator তৈরি
const Stack = createStackNavigator();
function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
      <Stack.Screen name="SubDetail" component={SubDetailScreen} />
    </Stack.Navigator>
  );
}

// Drawer Navigator তৈরি
const Drawer = createDrawerNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={StackNavigator} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

এখানে কী হচ্ছে:

• StackNavigator তৈরি করা হয়েছে, যা Home, Details, এবং SubDetail স্ক্রীনগুলির স্ট্যাক নেভিগেশন পরিচালনা করে।
• ড্রয়ার মেনুর মধ্যে শুধুমাত্র StackNavigator পাস করা হয়েছে। এটি Home স্ক্রীন থেকে ডিটেইলস স্ক্রীনে এবং সাব-ডিটেইল স্ক্রীনে নেভিগেট করার জন্য ব্যবহৃত হবে।

সারাংশ

• Drawer Navigation হলো একটি সাইড মেনু, যা ব্যবহারকারীদের অ্যাপের বিভিন্ন স্ক্রীনে নেভিগেট করার সুযোগ দেয়। React Native-এ এটি @react-navigation/drawer ব্যবহার করে কনফিগার করা হয়।
• Nested Stack Navigation ব্যবহৃত হয় যখন একটি স্ক্রীনে একাধিক স্তরের নেভিগেশন প্রয়োজন হয়। React Native-এ @react-navigation/stack ব্যবহার করে এটি কনফিগার করা হয়।
• আপনি একসাথে Drawer Navigation এবং Nested Stack Navigation ব্যবহার করতে পারেন, যাতে একটি ড্রয়ার মেনুতে একাধিক স্তরের নেভিগেশন কার্যকরীভাবে পরিচালনা করা যায়।

এটি React Native অ্যাপের নেভিগেশন কাঠামো আরও শক্তিশালী ও ব্যবহারকারী বান্ধব করে তোলে।